import React from 'react';
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button, Col, AutoComplete, DatePicker, TimePicker, Form, Icon, Input, InputNumber, Row, Select, Radio } from 'antd'
import { getTimeDistance } from 'utils'
import moment from 'moment'

const FormItem = Form.Item
const { Option } = Select
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const Filter = ({
  onFilterChange,
  handleOnChange,
  condition,
  empList,
  departments,
  handleSearch,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  } }) => {

  const handleSubmit = (f) => {
    let fields = getFieldsValue()
    if (f) {
      fields = {
        ...fields,
        ...f,
      }
    }
    let data = {}
    data.dataSize = fields.dataSize
    if (fields.condition === 'wxId') {
      data.wxId = fields.wxId
    } else if (fields.condition === 'employee') {
      data.belongEmpId = fields.belongEmpId
    } else if (fields.condition === 'department') {
      data.belongDeptId = fields.belongDeptId
    }
    onFilterChange(data)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    fields.condition = condition
    switch (condition) {
      case "wxId":
        fields.wxId = null
        break;
      case "employee":
        fields.belongEmpId = null
        break;
      case "department":
        fields.belongDeptId = null
        break;
    }
    setFieldsValue(fields)
    onFilterChange()
    // handleSubmit()
  }

  const onChange = (e) => {
    let fields = getFieldsValue()
    fields.dataSize = e.target.value
    handleSubmit(fields)
  }

  const renderConditionItem = (type) => {
    switch (type) {
      case "wxId":
        return (<FormItem {...formItemLayout}>
          {getFieldDecorator('wxId')(<Input style={{ width: "100%" }} placeholder="运营微信号" />)}
        </FormItem>)
        break;
      case "employee":
        return (<FormItem {...formItemLayout}>
          {getFieldDecorator('belongEmpId')(
            <AutoComplete
              dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
              style={{ width: '100%' }}
              onSearch={handleSearch}
              placeholder="员工编号或名称"
            />,
          )}
        </FormItem>)
        break;
      case "department":
        return (<FormItem {...formItemLayout}>
          {getFieldDecorator('belongDeptId')(
            <Select style={{ width: '100%' }} allowClear placeholder="请选择部门">
              {departments.map(item => (<Option value={item.id}>{item.name}</Option>))}
            </Select>,
          )}
        </FormItem>)
        break;
    }
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={10} sm={24}>
          <FormItem {...formItemLayout} labelCol={{ span: 4 }} label="时间">
            {getFieldDecorator('dataSize', { initialValue: "3" })
              (<Radio.Group onChange={(e) => onChange(e)}>
                <Radio.Button value="0">今天</Radio.Button>
                <Radio.Button value="1">昨天</Radio.Button>
                <Radio.Button value="2">最近7天</Radio.Button>
                <Radio.Button value="3">最近30天</Radio.Button>
              </Radio.Group>)
            }
          </FormItem>
        </Col>
        <Col md={10} sm={24}>
          <FormItem {...formItemLayout} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label="条件搜索">
            <Col span={8}>
              <FormItem>
                {getFieldDecorator('condition', { initialValue: condition })(
                  <Select onChange={handleOnChange} style={{ width: "100%" }}  >
                    <Option value="wxId">按微信号</Option>
                    <Option value="employee">按员工</Option>
                    <Option value="department">按部门</Option>
                  </Select>,
                )}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
                -
              </span>
            </Col>
            <Col span={14}>
              {renderConditionItem(condition)}
            </Col>
          </FormItem>
        </Col>
        <Col span={4}>
          <div>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
          </div>
        </Col>
      </Row>

    </div >
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func
}
export default Form.create()(Filter)
